<!DOCTYPE html>
<html>
<head>
    <title>生成图标</title>
</head>
<body>
    <canvas id="canvas16" width="16" height="16"></canvas>
    <canvas id="canvas48" width="48" height="48"></canvas>
    <canvas id="canvas128" width="128" height="128"></canvas>
    
    <script>
        // 创建图标的函数
        function createIcon(canvasId, size) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            // 创建渐变背景
            const gradient = ctx.createLinearGradient(0, 0, size, size);
            gradient.addColorStop(0, '#4a90e2');
            gradient.addColorStop(1, '#7e57c2');
            
            // 绘制圆形背景
            ctx.beginPath();
            ctx.arc(size/2, size/2, size/2 - 1, 0, 2 * Math.PI);
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // 添加玻璃拟态效果
            ctx.beginPath();
            ctx.arc(size/2, size/2, size/2 - 3, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
            ctx.fill();
            
            // 添加工具图标
            ctx.fillStyle = 'white';
            ctx.font = `bold ${size/4}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('Dev', size/2, size/2);
            
            // 下载图标
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = canvasId.replace('canvas', 'icon') + '.png';
                a.click();
                URL.revokeObjectURL(url);
            });
        }
        
        // 生成不同尺寸的图标
        window.onload = function() {
            createIcon('canvas16', 16);
            createIcon('canvas48', 48);
            createIcon('canvas128', 128);
        };
    </script>
</body>
</html>